/**
 * RefreshLocalcacheDialogue component
 * @module components/root/RefreshLocalcacheDialogue
 */

import React, { useCallback } from "react";
import {
  Dialog,
  DialogActions,
  DialogTitle,
  Typography,
  Button,
} from "@mui/material";
import { useSubmit } from "react-router-dom";

/**
 * RefreshLocalcacheDialogue component
 * @function RefreshLocalcacheDialogue
 * @static
 * @returns {component} RefreshLocalcacheDialogue
 */
export default function RefreshLocalcacheDialogue({
  handleCloseRefreshLocalcacheDialog,
  closeRefreshLocalcacheDialog,
  openRefreshLocalcacheDialog,
  setProgress,
}) {
  // Handle refresh request
  const submit = useSubmit();
  const handleRefresh = useCallback((event) => {
    event.preventDefault();
    submit(
      { type: "refresh-local-cache" },
      {
        method: "post",
        encType: "application/x-www-form-urlencoded",
      }
    );
    setProgress({ loading: true, title: "正在刷新缓存，请稍候……" });
  }, []);

  // Render component
  return (
    <Dialog
      open={openRefreshLocalcacheDialog}
      onClose={closeRefreshLocalcacheDialog}
      disableEscapeKeyDown={false}
      aria-describedby="refresh-local-cache-dialog"
    >
      <DialogTitle
        id="timeout-logout"
        align="center"
        sx={{
          width: "200px",
        }}
      >
        确认要刷新缓存吗？
      </DialogTitle>
      <DialogActions
        sx={{
          display: "flex",
          flexFlow: "row nowrap",
          justifyContent: "space-around",
          height: 60,
        }}
      >
        <form onSubmit={handleRefresh}>
          <Button
            type="submit"
            onClick={handleCloseRefreshLocalcacheDialog}
            autoFocus
          >
            <Typography variant="body2">确认</Typography>
          </Button>
        </form>
        <Button onClick={handleCloseRefreshLocalcacheDialog}>
          <Typography variant="body2">取消</Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
}
